<template>
  <!--根标签-->
  <section>
    <!--顶部的搜索栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="queryData">
        <el-form-item>
          <el-input v-model="queryData.keyword" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--列表
      :data:列表展示的数据集
    -->
    <el-table :data="listDatas" highlight-current-row v-loading="listLoading"  element-loading-text="拼命加载中" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="部门名称" >
      </el-table-column>
      <el-table-column prop="intro" label="部门简介" width="100"  >
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" sortable>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间"  >
      </el-table-column>
      <el-table-column prop="manager.username" label="部门经理"  >
      </el-table-column>
      <el-table-column prop="parent.name" label="上级部门" >
      </el-table-column>
      <el-table-column prop="path" label="路径"  >
      </el-table-column>
      <el-table-column prop="state" label="状态" >
        <template scope="scope">
          <span v-if="scope.row.state=='0'" style="color: red">停用</span>
          <span v-if="scope.row.state=='1'" style="color: green">正常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="pageSizes"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="currentPage"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增/修改界面-->
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="dataForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="dataForm.state">
            <el-radio class="radio" :label="1">启用</el-radio>
            <el-radio class="radio" :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--
          options:级联框数据源
          props:
            expandTrigger:打开下级的方式
            value:配置对象的里面的提交数据的key
            label:配置对象的里面的显示数据的key
            checkStrictly:可选择任意的一级
        -->
        <el-form-item label="上级部门">
          <el-cascader
              clearable
              v-model="dataForm.parent"
              :options="deptTrees"
              :props="{ expandTrigger: 'hover',
                       value:'id',
                       label:'name',
                       checkStrictly: true
                       }"
              ></el-cascader>
        </el-form-item>


        <el-form-item label="部门经理" >
          <!--
              employees:必须是一个数组,装的就是对象,应该是从后台查询出来
              :label:用于显示的名字
              :value:提交的数据--支持提交整个对象
              value-key="id" 绑定对象的时候必填的值
              clearable:可清空的下拉框
              filterable:可搜索
          -->
          <el-select v-model="dataForm.manager" filterable clearable  value-key="id" placeholder="请选择">
            <el-option  v-for="employee in employees" :key="employee.id" :label="employee.username" :value="employee">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="dataForm.intro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>



  </section>

</template>


<script>

export default {
  data(){
    return {
      listDatas:[],
      listLoading:true, //开启加载效果
      sels:[],//用户多选 选中的数据
      total:0,//记录总条数
      pageSize:5,
      pageSizes:[5, 10, 20, 50],
      currentPage:1,
      queryData:{
        keyword:''
      },
      title:'',
      dataForm:{
        id:null,
        name:"",
        state:null,
        intro:"",
        parent_id:null,
        manager_id:null,
        path:""
      },
      addLoading:false,//给按钮设置加载效果
      dataFormRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        state:[
          { required: true, message: '请输选择状态', trigger: 'blur' }
        ]
      },
      addFormVisible:false, //控制新增和修改弹出框 隐藏与显示
      employees:[],
      deptTrees:[]//存放部门树数据
    }
  },
  methods:{
    search(){
      this.loadListData();
    },
    handleAdd(){
      this.title="新增";
      //清空表单数据
      this.dataForm={
        id:null,
        name:"",
        state:null,
        intro:"",
        parent_id:null,
        manager_id:null,
        path:""
      }
      //显示弹出框
      this.addFormVisible=true;
    },
    //加载当前列表数据方法
    loadListData(){
      //组装高级查询和分页的代码
      let param={
        keyword:this.queryData.keyword,
        pageSize:this.pageSize,
        currentPage:this.currentPage
      }
      this.$http.post("/department",param).then(res=>{
        console.debug(res)
        let {data,success,message}=res.data;
        if (success){
          this.listDatas=data.dataList;
          this.total=data.total;
          //关闭页面的加载效果
          this.listLoading=false;
        }else {
          this.$message.error(message)
        }
      })
    },
    //性别显示转换
    formatState(row, column) {
      return row.state == 1 ?' <span style="color:green;">启用</span>' : row.state == 0 ? '<span style="color:red;">禁用</span>' : '未知';
    },
    handleEdit(index,row){
      console.debug(row)
      this.title="编辑";
      //做数据的回显
      this.dataForm=row;
      this.dataForm.parent=row.parent_id;
      //打开弹出框
      this.addFormVisible=true;
    },
    handleDel(index,row){
      //row删除的当前行的数据
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/department/"+row.id).then((res) => {
          this.listLoading = false;
          if (res.data.success){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error("删除失败了.请重新再试")
          }
          //重新加载列表数据
          this.loadListData();
        });
      }).catch(() => {
        this.$message("您以取消此操作");
      });

    },
    selsChange(sels) {//多选框触发方法,sels用户选择的列表数据
      this.sels = sels;
    },
    batchRemove(){//批量删除

    },
    handleCurrentChange(val){//翻页的触发次方法
      //val就是当前展示页的数据
      this.currentPage=val;
      this.loadListData();
    },
    handleSizeChange(val){
      //val 就是当前选中的每页展示多少条
      this.pageSize=val;
      this.currentPage=1;
      this.loadListData();
    },
    addSubmit(){
      this.$refs.dataForm.validate((valid) => {
        //valid 当前表单验证是否通过-通过true
        if (valid) {
          this.addLoading = true;
          this.$confirm('确认提交数据？', '提示', {}).then(()=>{
            //判断上级部门的类型
            if(this.dataForm.parent){
              if(this.dataForm.parent instanceof Array){//数组
                this.dataForm.parent_id=this.dataForm.parent[this.dataForm.parent.length-1]
              }else {//数字
                this.dataForm.parent_id=this.dataForm.parent;
              }
            }
            //
            this.dataForm.parent=null;
            //提交数据
            this.$http.put("/department",this.dataForm).then(res=>{
              if (res.data.success){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else {
                this.$message.error("操作失败了,请重新再试")
              }
              //关闭弹出框
              this.addFormVisible=false;
              //关闭按钮加载效果
              this.addLoading=false;
              //重新加载列表数据
              this.loadListData();
            })
          }).catch(()=>{
            this.$message("您以取消此操作");
          })
        }
      })

    },
    loadEmployees(){//查询所有的员工信息
      this.$http.get("/employee").then(res=>{
        this.employees=res.data.data;
      })
    },
    loadDeptTree(){
      this.$http.get("/department/deptTree").then(res=>{
        this.deptTrees=res.data.data;
      })
    }


  },
  mounted() {
    //加载完毕以后调用获取列表数据的方法
    this.loadListData();
    //
    this.loadEmployees();
    this.loadDeptTree();
  }


}

</script>

<style scoped>

</style>